<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画button</title>
    <style>
        #box {
            margin: 50px auto;
            padding: 5px 0 0 10px;
            position: relative;
        }

        #box .btn {
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 40px;
            background: #26bfc5;
            cursor: pointer;
            text-align: center;
            color: #fff;
            z-index: 10;
        }
        .animated {
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }

        .animated.infinite {
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite
        }
        .flash {
            width: 80px;
            height: 80px;
            top: 5px;
            left: 10px;
            border-radius: 40px;
            position: absolute;
            z-index: -10;
            animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            background: transparent;
        }

        @keyframes sploosh {
            0% {
                box-shadow: 0 0 0 0px rgba(38, 191, 197, 0.5);
                background: rgba(38, 191, 197, 0.5);
            }
            100% {
                box-shadow: 0 0 0 20px rgba(38, 191, 197, 0);
                background: rgba(38, 191, 197, 0);
            }
        }
    </style>
</head>
<body>
<div id="box">
    <div class="btn">立即创建</div>
    <div class="flash animated infinite"></div>
</div>
</body>
</html>